<template>
  <div class='question-container'>
    <el-card class="box-card">
      <!-- 描述部分 -->
      <div slot="header" class="clearfix">
        <span class="des">说明：目前支持学科和关键字条件筛选</span>
        <el-button class="button-add" type="success" icon="el-icon-edit" size="mini" @click="$router.push('new')">新增试题</el-button>
      </div>
      <!-- 表单部分 -->
      <el-form :inline="true" class="demo-form-inline" label-width="70px" ref="form" :model="dataForm">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select placeholder="请选择" v-model="dataForm.subjectID" @change="handlechange">
                <el-option v-for="item in subjectList" :key="item.id" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="dataForm.catalogID">
                <el-option v-for="item in cataList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="dataForm.tags">
                <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" style="width: 221.4px" v-model="dataForm.keyWord"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="dataForm.questionType">
                <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select placeholder="请选择" v-model="dataForm.difficulty">
                <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="dataForm.direction">
                <el-option v-for="(item, index) in directionList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="dataForm.creatorID">
                <el-option v-for="item in inputerList" :key="item.id" :label="item.username" :value="item.username"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input style="width: 221.4px" v-model="dataForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input style="width: 221.4px" v-model="dataForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select placeholder="省份" style="width: 105px; margin-right: 10px" v-model="dataForm.province" @change="changeCity">
                <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select placeholder="城市" style="width: 105px" v-model="dataForm.citys">
                <el-option v-for="item in citysList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 123px">
            <el-form-item>
              <el-button style="margin-left: 50px" size="small" @click="handleClear">清除</el-button>
              <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 选项卡 -->
        <template>
          <el-tabs type="card" v-model="activeName" @tab-click="handletabClick">
            <el-tab-pane :label="item.label" :name="item.name" v-for="item in checkList" :key="item.label">
              <!-- 消息提示 -->
              <el-alert :title="`数据共${total}条`" type="info" :closable="false" show-icon style="margin-bottom: 10px">
              </el-alert>
              <!-- 表格 -->
              <el-table :data="questionList" style="width: 100%">
                <el-table-column prop="number" label="试题编号" width="120">
                </el-table-column>
                <el-table-column prop="subject" label="学科" width="100">
                </el-table-column>
                <el-table-column prop="catalog" label="目录" width="100"> </el-table-column>
                <el-table-column label="题型" v-slot='{row}' width="100">
                  {{questionType(row.questionType)}}
                </el-table-column>
                <el-table-column prop="question" label="题干" width="180">
                  <template slot-scope="scope">
                    <span v-html="scope.row.question"></span>
                  </template>
                </el-table-column>
                <el-table-column prop="addDate" label="录入时间" width="200">
                  <template slot-scope="scope"> {{scope.row.addDate | dateFormat}}</template>
                  <!-- <template v-slot="{ row }">
                    {{ $dateFormat(row.addDate)  }}
                  </template> -->
                </el-table-column>
                <el-table-column label="难度" width="100" prop="difficulty" v-slot='{row}'>
                  {{difficultyType(row.difficulty)}}
                </el-table-column>
                <el-table-column label="录入人" width="100" prop="creator"></el-table-column>
                <el-table-column label="审核状态" width="100" prop="chkState" :formatter='formatType'></el-table-column>
                <el-table-column label="审核意见" width="100" prop="chkRemarks"></el-table-column>
                <el-table-column label="审核人" width="100" prop="chkUser"></el-table-column>
                <el-table-column label="发布状态" width="100" prop="publishState" :formatter='pubType'></el-table-column>
                <el-table-column label="操作" width="220" fixed="right" align="center">
                  <template v-slot="scope">
                    <el-button type="text" size="small" @click="handledialogVisible(scope.row)">预览</el-button>
                    <el-button type="text" size="small" :disabled="scope.row.chkState=='0' ? false : true" @click="dialogVisibleClick(scope.row.id)">审核</el-button>
                    <el-button type="text" size="small" :disabled="scope.row.chkState=='0' ? false : true" @click="$router.push('new')">修改</el-button>
                    <el-button type="text" size="small" @click="handleUnder(scope.row)">{{scope.row.publishState===0? '下架' : '上架'}}</el-button>
                    <el-button type="text" size="small" :disabled="scope.row.chkState=='0' ? false : true" @click="handleDel(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </template>
        <!-- 分页 -->
        <el-pagination background layout="->,prev, pager, next,sizes,jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="dataForm.page" :page-sizes="[2, 10, 20, 50]" :page-size="dataForm.pagesize">
        </el-pagination>
      </el-form>
    </el-card>
    <el-dialog title="题目预览" width="50%" :visible.sync="dialogVisible">
      <el-row>
        <el-col :span="6">【题型】：{{ questionType(selectedQuestion.questionType) }}题</el-col>
        <el-col :span="6">【编号】：{{ selectedQuestion.id }}</el-col>
        <el-col :span="6">【难度】：{{ difficultyType(selectedQuestion.difficulty) }}</el-col>
        <el-col :span="6">【标签】：{{ selectedQuestion.tags }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">【学科】：{{ selectedQuestion.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ selectedQuestion.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ selectedQuestion.direction}}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">【题干】:</el-col>
      </el-row>
      <el-row>
        <div v-html="selectedQuestion.question" style="margin-top:10px"> </div>
      </el-row>
      <el-row>
        <div style="margin-top:10px"> </div>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-bottom:10px">{{ questionType(selectedQuestion.questionType) }}题 选项:（以下选中的选项为正确答案）：</el-col>
      </el-row>
      <template>
        <div style="margin:10px 0">
          <template v-if="selectedQuestion.questionType==1">
            <el-radio v-for="item in res" :key="item" v-model="chkState" :label='item'>{{item}}</el-radio>
          </template>
          <template v-else-if="selectedQuestion.questionType==2">
            <el-checkbox v-for="item in res" :key="item" :checked="item == '123' ? false : true">{{item}}</el-checkbox>
          </template>
        </div>
      </template>
      <hr />
      <el-row>
        <span>【参考答案】：</span>
        <el-button type="danger" size="small">视频答案预览</el-button>
      </el-row>
      <el-row>
        <video controls muted style="margin-top: 10px" />
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">【答案解析】：</el-col>
        <span v-html="selectedQuestion.answer" style="margin-top:10px"> </span>
      </el-row>
      <el-row>
        <div style="margin-top:10px"> </div>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">【题目备注】：</el-col>
        <span v-html="selectedQuestion.remarks" style="margin-top:10px"> </span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="题目审核" width="26%" :visible.sync="cliDialogVisible">
      <div class="dialogs">
        <el-form :model="form" ref="editFormRef">
          <el-form-item>
            <el-radio v-model="form.chkState" :label="1">通过</el-radio>
            <el-radio v-model="form.chkState" :label="2">拒绝</el-radio>
          </el-form-item>
          <el-form-item>
            <el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="form.chkRemarks">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="float:right;padding-top:25px">
          <el-button @click="cliDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAffirm">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 查询精选题库列表
import {
  choice, detail, remove, choiceCheck, choicePublish
} from '@/api/hmmm/questions.js'
// 城市列表
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list } from '@/api/hmmm/tags.js'
// 方向列表
import { questionType, difficulty, direction, chkType, publishType } from '@/api/hmmm/constants'
// 录入者接口
import { simple } from '@/api/base/users'
// 学科列表接口
import { simple as subList } from '@/api/hmmm/subjects'
import { list as cataList } from '@/api/hmmm/directorys'
export default {
  name: 'Questions-Choice',
  data () {
    return {
      // 审核意见
      form: {
        // 通过或者拒绝
        id: '',
        chkState: 1,
        chkRemarks: null
      },
      res: [123, 'www', 1212, 'sss'],
      textarea: '',
      radio: '1',
      // 城市列表
      citysList: [],
      // 列表总数量
      total: 0,
      // 选择的题目
      selectedQuestion: {},
      // 预览弹出层
      dialogVisible: false,
      // 审核弹出层
      cliDialogVisible: false,
      // 二级目录列表
      cataList: [],
      // 标签列表
      tagsList: [],
      // 切换选项卡
      activeName: 'all',
      // 学科列表
      subjectList: [],
      // 题目列表
      questionList: [],
      // 题型列表
      questionTypeList: questionType,
      // 难度
      difficultyList: difficulty,
      // 方向列表
      directionList: direction,
      // 精品审核列表
      chkTypeList: chkType,
      // 发布状态
      publishTypeList: publishType,
      // 录入者列表
      inputerList: [],
      // 学科分类列表
      cateList: [],
      dataForm: {
        page: 1,
        pagesize: 2,
        tags: null, // 标签
        number: null, // 试题编号
        subjectID: null, // 学科
        catalog: null, // 目录
        catalogID: null, // 二级目录
        questionType: null, // 试题类型
        question: null, // 题干
        addDate: null, // 录入时间
        creator: null, // 录入人
        diffculty: null, // 难度
        chkState: null, // 审核状态
        chkRemarks: null, // 审核意见
        chkUser: null, // 审核人
        publishState: null, // 发布状态
        keyWord: null, // 关键字
        citys: null, // 城市
        province: null // 省市
      },
      // 审核状态渲染
      checkList: [
        {
          name: 'all',
          label: '全部'
        },
        {
          name: 'one',
          label: '待审核'
        },
        {
          name: 'two',
          label: '已审核'
        },
        {
          name: 'three',
          label: '拒绝'
        }
      ]
    }
  },
  created () {
    this.initSubList() // 初始化全部列表
    // 获取学科列表
    this.initsubList()
    // 获取录入者列表
    this.initInputerList()
    // 获取二级目录列表
    this.initCaList()
    // 获取标签列表
    this.initTagsList()
  },
  computed: {
    provinces () {
      return provinces()
    }

  },
  methods: {
    // 下架
    async handleUnder (row) {
      const rer = await this.$confirm('确认修改吗？', '温馨提示', {
        type: 'warning'
      }).catch(err => err)
      if (rer === 'cancel') return
      try {
        const ret = await choicePublish(row)
        if (ret.data.success === true) {
          if (row.publishState === 0) {
            row.publishState = 1
          } else if (row.publishState === 1) {
            row.publishState = 0
          } else {
            return
          }
          this.$message.success('修改状态成功')
        }
      } catch {
        this.$message.error('修改失败')
      }
    },
    // 查询
    async handleQuery () {
      this.initSubList()
    },
    // 清除按钮
    handleClear () {
      this.dataForm = this.$options.data().dataForm
    },
    // 审核
    dialogVisibleClick (bb) {
      this.form.id = bb
      this.cliDialogVisible = true
    },
    // 点击审核确定
    async handleAffirm () {
      try {
        const aa = await choiceCheck(this.form)
        if (aa.status === 200) {
          console.log(aa)
          this.initSubList()
          this.cliDialogVisible = false
          this.$message.success('修改成功')
        }
      } catch {
        this.$message.error('修改失败')
      }
    },
    // 获取基础题库详情   预览
    async handledialogVisible (row) {
      const { data: que } = await detail({ id: row.id })
      this.selectedQuestion = que
      this.dialogVisible = true
      // console.log(que)
    },
    // 获取全部列表
    async initSubList () {
      const ret = await choice(this.dataForm)
      // console.log(ret)
      if (ret.status === 200) {
        this.questionList = ret.data.items
        // console.log(ret)
        this.cateList = ret.data.items // 学科分类列表
        this.total = ret.data.counts
      }
    },
    // 获取学科列表
    async initsubList () {
      const { data: items } = await subList()
      // console.log(items)
      this.subjectList = items
    },
    // 获取录入者列表
    async initInputerList () {
      const { data } = await simple()
      this.inputerList = data
    },
    // 获取二级目录列表
    async initCaList (id) {
      const { data: { items: caList } } = await cataList({ page: 1, pagesize: 100, subjectID: id })
      this.cataList = caList
      console.log(caList)
    },
    // 获取标签列表
    async initTagsList (id) {
      const { data: { items: tagglist } } = await list({ page: 1, pagesize: 100, subjectID: id })
      this.tagsList = tagglist
      // console.log(tagglist)
    },
    // 枚举-----题型由id转数字；难度由id转数字
    questionType (id) {
      const TYPES = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return TYPES[id]
    },
    difficultyType (id) {
      const TYPES = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return TYPES[id]
    },
    chkType (id) {
      const TYPES = {
        0: '待审核',
        1: '通过',
        2: '拒绝'
      }
      return TYPES[id]
    },
    // 格式化审核状态：参数一表示row
    formatType (row) {
      const info = this.chkTypeList.find(item => parseInt(item.value) === parseInt(row.chkState))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化发布状态
    pubType (row) {
      const info = this.publishTypeList.find(item => parseInt(item.value) === parseInt(row.publishState))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 选项卡切换
    handletabClick () {
      if (this.activeName === 'all') {
        this.dataForm.chkState = null
        this.initSubList()
      } else if (this.activeName === 'one') {
        this.dataForm.chkState = '0'
        this.initSubList()
      } else if (this.activeName === 'two') {
        this.dataForm.chkState = '1'
        this.initSubList()
      } else if (this.activeName === 'three') {
        this.dataForm.chkState = '2'
        this.initSubList()
      }
    },
    // 监听每页条数发生的变化
    handleSizeChange (val) {
      this.dataForm.pagesize = val
      // 重新带着最新的对象，获取一次最新的每页几条数据
      this.dataForm.page = 1
      this.initSubList()
    },
    // 页码条数发生变化的时候
    handleCurrentChange (val) {
      this.dataForm.page = val
      this.initSubList()
    },
    // 监听change事件
    handlechange (subId) {
      this.initCaList(subId)
      this.initTagsList(subId)
    },
    // 删除数据
    async handleDel (row) {
      try {
        const ret = await this.$confirm('不爱了吗？', '温馨提示', {
          type: 'warning'
        }).catch(err => err)
        if (ret === 'cancel') return
        const delRet = await remove({ id: row.id })
        if (delRet.status === 200) {
          this.$message.success('删除成功')
        }
      } catch (err) {
        this.$message.error('删除失败')
        console.log(err)
      }
    },
    changeCity (val) {
      this.dataForm.citys = ''
      this.citysList = citys(val)
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 10px;
  .clearfix {
    .des {
      font-size: 12px;
      color: pink;
      float: left;
    }
    .button-add {
      float: right;
    }
    .customdeali {
      height: 60%;
    }
  }
}
.dialogs {
  height: 180px;
}
</style>
